<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="项目名称：">
        <el-autocomplete
          v-model="name"
          :fetch-suggestions="querySearchAsync"
          placeholder="请填入项目名称"
          clearable
          @select="handleSelect"
        />
      </el-form-item>
      <el-form-item label="项目编码" prop="num">
        <el-input v-model="form.num" style="width: 46%" />
      </el-form-item>
      <el-form-item label="项目施工单位" prop="build">
        <el-input v-model="form.build" style="width: 46%" />
      </el-form-item>
      <el-form-item label="项目区域" prop="area">
        <el-select v-model="form.area " placeholder="请选择项目所在区域">
          <el-option label="市直管" value="371601" />
          <el-option label="滨城区" value="371602" />
          <el-option label="开发区" value="371604" />
          <el-option label="高新区" value="371605" />
          <el-option label="北海新区" value="371606" />
          <el-option label="惠民县" value="371621" />
          <el-option label="阳信县" value="371622" />
          <el-option label="无棣县" value="371623" />
          <el-option label="沾化区" value="371624" />
          <el-option label="博兴县" value="371625" />
          <el-option label="邹平市" value="371626" />
          <el-option label="工业园区" value="371627" />
        </el-select>
      </el-form-item>
      <el-form-item label="项目合作银行" prop="resource">
        <el-select v-model="form.resource " placeholder="请选择合作银行">
          <el-option label="农商银行" value="0" />
          <el-option label="邮储银行" value="1" />
          <el-option label="工商银行" value="2" />
          <el-option label="恒丰银行" value="3" />
          <el-option label="兴业银行" value="4" />
          <el-option label="中国银行" value="5" />
          <el-option label="东营银行" value="6" />
        </el-select>
      </el-form-item>
      <el-form-item label="系统服务费" prop="pay">
        <el-input v-model="form.pay" style="width: 46%" />
      </el-form-item>
      <el-form-item label="服务时间">
        <el-col :span="11">
          <el-date-picker v-model="form.paytime_start" type="date" placeholder="请选择一个开始时间" value-format="timestamp" style="width: 100%;" />
        </el-col>
        <el-col :span="2" class="line">-</el-col>
        <el-col :span="11">
          <el-date-picker v-model="form.paytime_end" type="date" placeholder="请选择一个结束时间" value-format="timestamp" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <el-form-item label="项目完工时间">
        <el-col :span="11">
          <el-date-picker v-model="form.time" type="date" placeholder="请选择一个时间" value-format="timestamp" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <el-form-item label="项目联系人" prop="person">
        <el-input v-model="form.person" style="width: 46%" />
      </el-form-item>

      <el-form-item label="项目联系人电话" prop="phone">
        <el-input v-model="form.phone" style="width: 46%" />
      </el-form-item>

      <el-form-item label="设备信息" prop="pay">
        <el-transfer
          v-model="value4"
          style="text-align: left; display: inline-block"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :titles="['库存1', '出库']"
          :button-texts="['到左边', '到右边']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          :data="data"
          @change="handleChange"
        >
          <span slot-scope="{ option }"><el-tag :color="option.color" :type="option.type">{{ option.attribute }}</el-tag> - {{ option.label }}{{ option.key }}</span>
          <el-button slot="left-footer" class="transfer-footer" size="small">操作</el-button>
          <el-button slot="right-footer" class="transfer-footer" size="small">操作</el-button>
        </el-transfer>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">Create</el-button>
        <el-button @click="onCancel">Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
//穿梭框
<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
  .el-transfer-panel{
    width: 400px;
    /*height: 500px;*/
  }
</style>
<script>
import { deviceListInfo, subjectInfo, subjectListInfo } from '@/api/user'

export default {
  data() {
    const generateData = _ => {
      const data = []
      console.log('dddddddddddd')
      return data
    }
    return {
      rules: {
        name: [
          { required: true, message: '请填写项目名称', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请填写项目编号', trigger: 'blur' }
        ]
        // person: [
        //   { required: true, message: '请填写项目联系人', trigger: 'blur' },
        //   // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // phone:[
        //   {required: true, message: '请填写项目联系人电话', trigger: 'blur'}
        // ],
        // area: [
        //   { required: true, message: '请填写项目所在地', trigger: 'blur' },
        //   // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // bank:[
        //   {required: true, message: '请填写项目合作银行', trigger: 'blur'}
        // ],
        // build: [
        //   { required: true, message: '请填写项目施工单位', trigger: 'blur' },
        //   // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // pay:[
        //   {required: true, message: '请填写项目服务费', trigger: 'blur'}
        // ]
      },
      form: {
        subject_name: '',
        subject_num: '',
        subject_build: '',
        subject_bank: '',
        subject_pay: '',
        subject_paytime_start: '',
        subject_paytime_end: '',
        subject_time: '',
        subject_person: '',
        subject_phone: '',
        subject_area: ''
      },
      name: '',
      restaurants: [],
      state: '',
      timeout: null,
      data: generateData(),
      value: [1],
      value4: [1],
      renderFunc(h, option) {
        return '<span>{ option.key } - { option.label }</span>'
      }
    }
  },
  mounted() {
    console.log('ssss')
    this.restaurants = this.loadAll()
  },
  created: function() {
    console.log('ddddddssssssssssssddddd')
    deviceListInfo(
      { device_mac: undefined }
    ).then((res) => {
      console.log('ssddsds')
      if (res.code == '20000') {
        var deviceinfo = [
          {
            key: 0, label: 'sdsd', disabled: false
          }, {
            key: 1, label: 'ceshi', disabled: true
          },
          {
            key: 2, label: 'sdsd', disabled: false
          }, {
            key: 3, label: 'ceshi', disabled: true
          }
        ]
        this.data = res.data
        // this.$message('提交成功!')
      } else {
        // this.$message({
        //   message: '提交失败，请联系管理员!',
        //   type: 'warning'
        // })
      }
    })
  },
  methods: {
    loadAll() {
      return [

      ]
    },
    //  穿梭框
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    },
    querySearchAsync(queryString, cb) {
      console.log('ddd')
      subjectListInfo(
        {
          subject_name: queryString
        }).then((res) => {
        if (res.code == '20000') {
          cb(res.data)
          // this.$message('提交成功!')
        } else {
          // this.$message({
          //   message: '提交失败，请联系管理员!',
          //   type: 'warning'
          // })
        }
      })
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout)
      console.log('queryString:', queryString)
      if (results.length > 0) {
        this.timeout = setTimeout(() => {
          this.form.num = ''
          cb(results)
        }, 3000 * Math.random())
      }
    },
    createStateFilter(queryString) {
      console.log('createStateFilter')
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      this.form.num = item.address
      console.log(item)
    },
    onSubmit(form) {
      var value_list = this.value4// 项目编码
      console.log(value_list)
      // 获取表单信息

      var subject_num = this.form.num// 项目编码
      var subject_name = this.form.name// 项目铭传给你
      var subject_area = this.form.area// 项目所在地
      var subject_bank = this.form.resource// 项目所属银行
      var subject_build = this.form.build// 项目施工单位
      var subject_paytime_start = this.form.paytime_start// 项目服务费开始时间
      var subject_pay = this.form.pay// 项目服务费
      var subject_paytime_end = this.form.paytime_end// 项目服务费结束时间
      var subject_person = this.form.person// 项目联系人
      var subject_phone = this.form.phone// 项目联系人电话
      var subject_time = this.form.time// 项目完工时间

      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log('ddddddd')
          subjectInfo(
            {
              subject_num: subject_num,
              subject_name: subject_name,
              subject_area: subject_area,
              subject_bank: subject_bank,
              subject_build: subject_build,
              subject_paytime_start: subject_paytime_start,
              subject_pay: subject_pay,
              subject_paytime_end: subject_paytime_end,
              subject_person: subject_person,
              subject_phone: subject_phone,
              subject_time: subject_time
            }).then((res) => {
            if (res.code == '20000') {
              this.$message('提交成功!')
            } else {
              this.$message({
                message: '提交失败，请联系管理员!',
                type: 'error'
              })
            }
          })
        } else {
          this.$message('请填完整后再提交!')
          console.log('error submit!!')
          return false
        }
      })
    },

    onCancel() {
      this.$message({
        message: '数据已清空!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
  .line{
    text-align: center;
  }
</style>

